<template>
    <div class="dCent">
        <ul>
            <li v-for="(ele,index) of obj" :key="index">
                <a href="">
                    <img :src="ele.img">
                    <div>
                        <h3>{{ele.title}}</h3>
                        <p>{{ele.content}}</p>
                        <span>{{ele.date}}</span>
                    </div>
                </a>
            </li>
            
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return {
            obj:null
        }
    },
    mounted(){
        fetch("./server/data/dtData.json").then(res=>res.json()).then(res=>{
            this.obj=res
           // console.log(this.obj)
        })
    }
}
</script>
<style>
.dCent{margin-top: 0.4rem;}
.dCent ul {padding-left:0.4rem}
.dCent ul li{height:2.4rem;margin-bottom: 0.5rem}
.dCent ul li img{float: left;height:100%;width:2.5rem}
.dCent ul li div{float: left;width:4.2rem;margin-top:0.2rem;line-height:0.5rem;color:#555;font-size:0.25rem;margin-left:0.25rem;overflow: hidden;}
.dCent ul li div h3{font-size:0.3rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

</style>


